Code Organization

Notes on organizing code in reusable way:

  1. If possible, start and learn with nx.dev
  2. When not using nx.dev, use similar project and folder structure:
myorg/
├── apps/
├── libs/
├── tools/
├── workspace.json
├── nx.json
├── package.json
└── tsconfig.base.json

/apps/ contains the application projects. This is the main entry point for a runnable application. We recommend keeping applications as light-weight as possible, with all the heavy lifting being done by libraries that are imported by each application.

/libs/ contains the library projects. There are many different kinds of libraries, and each library defines its own external API so that boundaries between libraries remain clear.

/tools/ contains scripts that act on your code base. This could be database scripts, custom executors (or builders), or workspace generators.

Main modules to use in apps are 'core-state' - application sate management code. E.g. redux reducers and action creators 'core-data' - services for 'components' - pure functional components' 'pages' - 'functonal views and pages that compose components into views. the main app-level logic should be here' 'design-tokens' - design tokens, that contain the css & js representations of the tokens 'assets' - icons, fonts, images

No related notes